<template>
    <div class="btnGroup">
        <div class="btn-item btnPointer" v-for="(item, index) in btnGroup" :key="index" @click="onClickBtn(item)">
            {{ item }}
        </div>
        <!-- <div class="btn-item exportBtn btnPointer">
            导出
        </div> -->
    </div>
</template>

<script setup>
import { useUser } from "@/stores/user"
// 办公室-新增、修改、更新计划进度、更新完成情况、更新备注、删除；
// 业务科室：更新计划进度、更新完成情况、更新需要说明事项  
// "历史记录变更",
const userStore = useUser()
const btnGroup = computed(() => {
    const { userType, orgName } = userStore.userInfo
    if (userType == 'thirdLd') {
        return ['历史记录变更']
        // return ['新增', '删除', '历史记录变更']
    } else if (userType == 'informant') {
        // '修改',
        return orgName == '办公室' ? ['考核评价', '历史记录变更'] : ['历史记录变更']
        // return ['计划进度', '完成情况', '说明事项', '备注', '历史记录变更']
        // return ['修改', '计划进度', '完成情况', '说明事项', '备注', '历史记录变更']
    } else if (userType == 'secondLd') {
        return ['督办', '历史记录变更']
    } else {
        return ['历史记录变更']
    }
})

const emit = defineEmits(['sendOp'])
function onClickBtn(item) {
    emit('sendOp', item)
}


</script>

<style lang="scss" scoped>
.list {
    overflow-x: scroll;
}

.btnGroup {
    // display: flex;
    display: flex;
    width: calc(100vw - 52px);
    overflow-x: scroll;
    margin: 30px 0;
    padding: 5px;

    .btn-item {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        margin-right: 10px;
        padding: 5px 24px;
        border-radius: 50px;
        background: rgba(217, 241, 255, 1);
        border: 2px solid rgba(0, 160, 252, 1);
        font-size: 24px;
        color: rgba(0, 160, 252, 1);
    }

}

.btnGroup::-webkit-scrollbar {
    display: none;
}

// .exportBtn {
//     display: none !important;
// }

@media (max-width: 750px) {
    .exportBtn {
        display: none !important;
    }
}
</style>